State vs. Props

Firat Atalay

4 min read

·

Feb 8, 2024

50

A very common beginner question or sometimes even an interview question is this, what’s the difference between state and props?

Well, we actually already learned almost everything to answer that question, but let’s still make the difference between state and props crystal clear in this lecture, which will also serve as a nice summary to this entire section.

So as we already know, state is internal data. So data that is owned by the component in which it is declared, and we can see that nicely in this small example with two components. Now, on the other hand, props is external data.

So data that is owned by the parent component, and you can think of props as function parameters. So as a communication channel between parent and child components where parents can pass data into children.

State on the other hand can be thought of as the component’s memory because it can hold data over time, so across multiple re-renders.

Now state can be updated by the component itself and as we already know, this will then cause the component to be re-rendered by React. Therefore, we use this mechanism of state to make components interactive.

On the other side props work very differently. They are read only, so they cannot be modified by the component that is receiving them.

However, and this is something that we haven’t learned before, when the child component receives new updated props, that will actually also cause the component to re-render, and let’s actually analyze that here in this code example.

So one of the props that was passed to question is called “Up Votes”, and that up votes variable is actually state and the parent component, right? It’s created using the useState Hook and therefore up votes is in fact state.

Now if this piece of state is updated, of course the question component who owns the state will be re-rendered, but it makes sense that the child component who basically receives that state as props, should also be re-rendered right?

Because how else would the button component be kept in sync with the state that it received as a prop?

So in conclusion, whenever a piece of state is passed as a prop, when that state updates, both components are re-rendered. So both the component owning the state and the component receiving the state as a prop, and so this is a very important connection between state and props that you should keep in mind.

Now finally, while state is used by developers to make components interactive, props are used to give the parent component the ability to configure their child components. So basically props can be seen as settings in child components, which the parent component can define as they wish, and that’s it.

So if you ever get asked the difference between state and props in a job interview, I sure hope that you’re going to nail it.

reminder for me :